import React from "react";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
// https://www.amcharts.com/demos/trend-lines/
class AmSampleLine extends React.Component {
  componentDidMount() {
    // Create chart instance
    var chart = am4core.create("zoom-button-column", am4charts.XYChart);

    // Add data
    chart.data = [
      {
        category: "Week #1",
        value: 450,
        value2: 362,
        value3: 699,
      },
      {
        category: "Week #2",
        value: 269,
        value2: 450,
        value3: 841,
      },
      {
        category: "Week #3",
        value: 700,
        value2: 358,
        value3: 699,
      },
      {
        category: "Week #4",
        value: 4900,
        value2: 367,
        value3: 500,
      },
      {
        category: "Week #5",
        value: 500,
        value2: 485,
        value3: 369,
      },
      {
        category: "Week #6",
        value: 550,
        value2: 354,
        value3: 250,
      },
      {
        category: "Week #7",
        value: 420,
        value2: 350,
        value3: 600,
      },
    ];

    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 40;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueY = field;
      series.dataFields.categoryX = "category";
      series.name = name;
      series.tooltipText = "{categoryX}: [b]{valueY}[/]";
      series.strokeWidth = 2;
      // series.stacked = true;
    }

    createSeries("value", "Series #1");
    createSeries("value2", "Series #2");
    createSeries("value3", "Series #3");

    chart.legend = new am4charts.Legend();
    chart.cursor = new am4charts.XYCursor();

    chart.scrollbarX = new am4core.Scrollbar();

    // Zoom events
    valueAxis.events.on("startchanged", categoryAxisZoomed);
    valueAxis.events.on("endchanged", categoryAxisZoomed);
    function categoryAxisZoomed(ev) {
      var axis = ev.target;
      var start = axis.getPositionLabel(axis.start);
      var end = axis.getPositionLabel(axis.end);
      console.log("New range: " + start + " -- " + end);
    }
  }
  componentWillUnmount() {}
  render() {
    return (
      <div
        id="zoom-button-column"
        style={{ width: "100%", height: "500px" }}
      ></div>
    );
  }
}
export default AmSampleLine;
